<template>
    <div id="top-filter">
        <div class="filter-option">
            <div class="set-as-list-opt">
                <a 
                @click="setAsList" 
                class="top-option-association" 
                :class="{active: asctiveList.type.includes('association')}" 
                as-type="MY">
                    <span class="show-association-option-name">{{asctiveList.name}}</span> 
                    <van-icon name="play" class="select-as-icon" />
                </a>
                <a
                @click="setAschildWorkshop()" 
                class="top-option-association" 
                type="#association-workshop">
                    群主讲
                </a>
                <span class="top-association-line" :style="{left: `${lineTopLeft * 33.33}%`}"></span>
            </div>
            <div class="filter-as-list" v-show="overlayShow">
                <a 
                @click="chooseAs({type: item.type, name: item.name})" 
                v-for="item in asListData"
                :class="{active: item.type === asctiveList.type}"
                class="all-association-list-option" 
                :key="item.type">
                    {{item.name}}
                </a>
            </div>
        </div>
        <div class="filter-child">
            <area-filter v-show="asctiveList.type === 'association-area'" :overlayShowHome="overlayShowHome" @homeOverShow="homeOverShow" @homeOverHide="overHideHome"></area-filter>
        </div>
        <van-overlay :show="overlayShow" @click="setOverlayShow" duration="0" />
    </div>
</template>

<script>
import Vue from 'vue'

// UI组件
import { Overlay } from 'vant'
import { Icon } from 'vant'

// 自定义组件
import AreaFilter from './topFilterChild/Area'

Vue.use(Overlay).use(Icon)
export default {
    name: 'TopFilter',
    props: {
        asList: {
            type: Array,
            default: []
        },
        defaultAs: {
            type: Object,
            default: {
                name: '我的群',
                type: 'association-my'
            }
        },
        overlayShowHome: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            overlayShow: false,
            asctiveList: this.defaultAs,
            lineTopLeft: 0
        }
    },
    methods: {
        setOverlayShow() {
            this.overlayShow = !process.env.CLOSE_ON_CLICK_OVERLAY
        },
        // 点击显示、隐藏所有社群类型
        setAsList() {
            this.overlayShow = !this.overlayShow
        },
        // 点击选择顶部
        setListOptActive(index = 0) {
            this.lineTopLeft = index
        },
        // 点击选择群主讲
        setAschildWorkshop() {
            this.setListOptActive(1)
            this.$emit('choose-as', {
                type: 'workshop',
                isAs: false
            })
        },
        // 点击选择社群
        chooseAs({type, name}) {
            this.asctiveList.type = type
            this.asctiveList.name = name
            this.setListOptActive(0)
            this.$emit('choose-as', {
                type,
                name
            })
            this.overlayShow = !process.env.CLOSE_ON_CLICK_OVERLAY
        },
        // 显示主页遮罩层
        homeOverShow() {
            this.$emit('showOverlay')
        },
        // 隐藏主页遮罩层
        overHideHome() {
            this.$emit('hideOverlay')
        }
    },
    computed: {
        asListData() {
            return this.asList.filter((item, index) => {
                return item.type.includes('association')
            })
        }
    },
    components: {
        AreaFilter
    }
}
</script>

<style lang="scss" scoped>

    .filter-option {
        display: flex;
        height: 40px;
        align-items: center;
        width: 100%;
        text-align: center;
        background: white;
        position: relative;
        border-bottom: 1px solid #cccccc;
        z-index: 2;

        .set-as-list-opt {
            display: flex;
            width: 100%;

            .top-option-association {
                width: 33.33%;
                height: 100%;
                color: #666666;
                font-size: 14px;
                text-align: center;
                line-height: 40px;

                .select-as-icon {
                    transform: rotate(90deg);
                    font-size: 14px;
                }

                .select-as-icon-ing {
                    transform: rotate(-90deg);
                }
            }

            .top-association-line {
                position: absolute;
                width: 33.33%;
                height: 1px;
                background: #0077bf;
                left: 0px;
                bottom: -1px;
                transition: left .4s;
            }
        }

        .active {
            color: #007BBF!important;
            font-weight: bold;
        }

        .filter-as-list {
            position: absolute;
            left: 0;
            top: 40px;
            width: 100%;
            z-index: 3;
            line-height: 40px;
            transition: top .4s;
            display: flex;
            flex-wrap: wrap;
            background: white;

            .all-association-list-option {
                height: 100%;
                width: 33.333%;
                color: #666666;
                font-size: 14px;
                text-align: center;
            }

            .top-option-active {
                color: #007BBF!important;
                font-weight: bold;
            }
        }
    }
</style>